<template>
  <div>
    <div class="modle-box">
      <div style="flex: 0 1 30%">
        <dv-border-box12 style="width: 100%; height: 330px"
          ><div class="title">湿度</div>
          <div ref="humidityChart" style="width: 600px; height: 330px"></div>
        </dv-border-box12>
      </div>

      <div style="flex: 0 1 40%">
        <dv-border-box12 style="width: 100%; height: 330px"
          ><div class="title">雨量</div>
          <div ref="rainChart" style="width: 690px; height: 330px"></div>
        </dv-border-box12>
      </div>

      <div style="flex: 0 1 30%">
        <dv-border-box12 style="width: 100%; height: 330px"
          ><div class="title">CO2浓度</div>
          <div ref="co2Chart" style="width: 600px; height: 330px"></div>
        </dv-border-box12>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const humidityChart = ref();
function initHumidityChart() {
  let myChart = echarts.init(humidityChart.value);
  let option = {
    title: {
      text: "单位：%rh",
      x: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["空气湿度", "土壤湿度"],
      right: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      data: [
        "14点",
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
        "22点",
        "23点",
      ],
      name: "时刻",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      max: 80,
      min: 0,
      interval: 20,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        type: "bar",
        name: "空气湿度",
        data: [50, 55, 56, 58, 60, 66, 69, 70, 77, 60],
        barGap: "20%",
        barCategoryGap: "40%",
      },
      {
        name: "土壤湿度",
        type: "bar",
        data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 21],
      },
    ],
  };

  myChart.setOption(option);
}

const rainChart = ref();
function initRainChart() {
  let myChart = echarts.init(rainChart.value);
  let option = {
    title: {
      text: "单位：mm",
      x: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["雨量"],
      right: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      type: "category",
      name: "日期",
      data: ["16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日"],
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      max:1,
      min:0,
      interval:0.2,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "雨量",
        data: [0.1,0.2,0.2,0.3,0.3,0.4,0.3,0.1,0,0.5],
        type: "line",
      },
    ],
  };
  myChart.setOption(option);
}

const co2Chart = ref();
function initCo2Chart() {
  let myChart = echarts.init(co2Chart.value);
  let option = {
    title: {
      text: "单位:ppm",
      x: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    color: "#0575ff",
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["二氧化碳浓度"],
      right: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      data: [
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
        "22点",
        "23点",
      ],
      name: "时刻",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      yAxis: {
        type: "value",
        max: 500, //最大值
        min: 0, //最小值
        interval: 100, //间隔
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "二氧化碳浓度",
        type: "bar",
        data: [123, 132, 234, 231, 200, 211, 234, 235, 234],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

onMounted(() => {
  initHumidityChart();
  initRainChart();
  initCo2Chart();
});
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: bolder;
  padding-top: 10px;
  color: #6ecde4;
}
</style>
